<template>
    <template v-for="item in data">
        <div :class="{ row: true, bg: unfold.includes(item.subjectId) || bg }"
            :style="{ '--level': level, '--bg': level == 1 ? '#DEEBFF' : '#F5F7FA' }">
            <div>
                <div class="icon-box">
                    <template v-if="item.children && item.children.length > 0">
                        <div class="icon" v-if="!unfold.includes(item.subjectId)" @click="unfold.push(item.subjectId)">
                            <icon-plus /></div>
                        <div class="icon" v-else @click="unfold = unfold.filter(v => v != item.subjectId)"><icon-minus />
                        </div>
                    </template>
                </div>
                {{ item.subjectName }}
            </div>
            <div>
                <slot name="input" :row="item"></slot>
            </div>
            <div>{{ item.subjectCode }}</div>
            <div>{{ type[item.subjectType] }}</div>
            <div>{{ item.money }}</div>
            <div>
                <slot name="btn" :row="item"></slot>
            </div>
        </div>
        <Tree v-if="(item.children && item.children.length > 0) && unfold.includes(item.subjectId)" :data="item.children"
            :level="level + 1" :type="type" :bg="true" :defult-unfold="item.children.map(v=>v.subjectId)">
            <template #btn="{ row }">
                <slot name="btn" :row="row"></slot>
            </template>
            <template #input="{ row }">
                <slot name="input" :row="row"></slot>
            </template>
        </Tree>
    </template>
</template>

<script setup lang="ts">
import type { PropType } from "vue";

interface DataType {
    [key: string]: any,
    children: DataType[]
}
const props=defineProps({
    data: {
        type: Array as PropType<DataType[]>,
        default: () => []
    },
    level: {
        type: Number,
        default: 1
    },
    type: {
        type: Object,
        required: true
    },
    bg: {
        type: Boolean
    },
    defultUnfold: {
        type: Array as PropType<string[]>,
        default: () => []
    }
})
const unfold = ref<string[]>([...props.defultUnfold])
</script>

<style lang="scss" scoped>
$border: 1px solid #D7D8E0;

.row {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr) 2fr;
    height: 50px;
    border-top: $border;

    >div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: $border;
        box-sizing: border-box;
    }

    >div:last-child {
        border-right: $border;
    }

    &:last-child {
        border-bottom: $border;
    }

    >div:first-child {
        justify-content: start;
        padding-left: calc(20px * var(--level) + 20px);
        gap: 10px;
    }

    .icon-box {
        width: 20px;
    }

    .icon {
        width: 20px;
        height: 20px;
        border: $border;
        text-align: center;
        line-height: 20px;
    }
}

.bg {
    background: var(--bg);
}
</style>
